<template>
  <div :id="domId" ref="haikanVideo" class="haikan-video">
    <div v-if="msg" :class="`tip-message tip-message-${componentStyle}`">{{ msg }}</div>
    <div v-if="isShowPreviewVideoTip" class="preview-video-tips">
      <span>参数配置正确，只能在预览面播放视频</span>
    </div>
  </div>
</template>
<script>
import EventBus from '@/event-bus/EventBus.js';
import vidCtrl from './videoCtlMinx';

export default {
  name: 'HaikangVideo',
  mixins: [vidCtrl],
  props: [
    'videoId',
    'config',
    'cameraIndexCode',
    'propCameraIndexCodes',
    'width',
    'height',
    'widgetInstanceId',
    'winContainerPid',
    'isInDialog',
    'x',
    'y',
    'isDesignView',
    'isMashupPreviewVideo'
  ],
  data() {
    return {
      w: 0,
      h: 0
    };
  },
  created() {
    this.domId = `haikan-video-${this.videoId}`;
    this.updateConfigProperty();
    EventBus.$on('visual-win-container-move', this.handleWinContainerMove);
  },
  mounted() {
    this.setWH();
    this.initPlugin();
  },
  beforeUnmount() {
    EventBus.$off('visual-win-container-move', this.handleWinContainerMove);
  },
  methods: {
    setWH() {
      const { width: domWidth, height: domHeight } = this.$refs.haikanVideo.getBoundingClientRect();

      if (this.isInDialog === '1') {
        this.w = domWidth;
        this.h = domHeight;
      } else {
        const finalW = Math.min.apply(null, [this.width, domWidth]);
        const finalH = Math.min.apply(null, [this.height, domHeight]);

        this.w = finalW;
        this.h = finalH;
      }
    },
    updateConfigProperty() {
      const { config: { property } = {} } = this.config;
      Object.keys(property || {}).forEach(key => {
        this[key] = property[key];
      });
    },
    handleWinContainerMove(winContainerWid) {
      if (this.winContainerPid === winContainerWid) {
        this.resizeVideoWin();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.haikan-video {
  width: 100%;
  height: 100%;
  .tip-message{
    color: #000;
    padding: 10px 0 0 10px;
    font-size: 15px;
    &-dark{
      color: #bcc0c5;
    }
    &-real{
      color: #00b8ff;
    }
  }

  .preview-video-tips {
    position: relative;
    height: 100%;
    background-color: #fff;
    font-size: 18px;

    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-weight: 600;
    }
  }
}
</style>
